<template>
  <div class="search-item">
<!--    @blur="setValue($event,true)"-->
    <el-input class="c-input" :ref="'ref-input-'+ index" :clearable="!notClearable" :placeholder="!notClearable?title:''" v-model="keyWord" :disabled="isDisabled"
              @blur="setValue($event,false,true)"
              @change="setValue($event,true)"
              @keyup.enter.native="setValue($event,true)">
      <el-button slot="append" class="open-button" icon="el-icon-search" @click="showTab"></el-button>
    </el-input>
    <el-dialog  :visible.sync="dialogVisible" width="1200px" >
      <h2>{{ title }}</h2>
      <el-row :gutter="32">
        <div v-for="keyItem in Object.keys(myFields)" v-if="myFields[keyItem].type === 'text' || myFields[keyItem].type === 'date' || myFields[keyItem].type === 'number'">
          <el-col :span="3">{{ myFields[keyItem].label }}</el-col>
          <el-col :span="21" :pull="1">
            <el-input type="text" clearable v-if="myFields[keyItem].type==='text'"
                      v-model="queryParams[myFields[keyItem].queryProp]"></el-input>
            <el-date-picker
              v-if="myFields[keyItem].type==='date'"
              v-model="queryParams[myFields[keyItem].queryProp]"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
              placeholder="选择日期"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              :picker-options="pickerOptions"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>

            <el-input type="number" clearable v-if="myFields[keyItem].type==='number'"
                      v-model="queryParams[myFields[keyItem].queryProp]" ></el-input>
          </el-col>
        </div>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="fetchData">查找</el-button>
      </el-row>
      <div>
      </div>
      <my-table :ref="'table-'+ index" :table-fields="tableFields" :result="result" :allowCheck="allowCheck"
                :index="index" @close="close"
                :is-multi="isMulti"
                @send="handleMessage"></my-table>
      <pagination
        :v_show="total >0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="loadData"
      />
    </el-dialog>
  </div>

</template>

<script>
import myTable from '@/views/components/searchTable/table'

export default {
  name: "index",
  props: {
    title: String,
    url: String,
    searchFields: String,
    tableFields: Array,
    allowCheck: String,
    index: String,
    isMulti: Boolean,
    isDisabled: Boolean,
    condition: Array,
    bindKey:String,
    defaultVal:String,
    notClearable: Boolean,
    // notClearable: {
    //   type:Boolean,
    //   default:false
    // }
  },
  components: {myTable},
  data() {
    return {
      items: [],
      dialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      result: [],
      myFields: [],
      keyWord: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      isSearch: this.isearch
    }
  },
  watch: {},
  methods: {
    loadData() {
      this.fetchData()
    },
    async fetchData() {
      let queryParamsHandled = {}
      Object.assign(queryParamsHandled,this.queryParams)
      for(let key in this.queryParams) {
        let value = this.queryParams[key];
        let item = this.myFields.find((item) => item.prop === key || item.queryProp === key);
        if(item && item.type === 'date') {
          queryParamsHandled[key] = 'daterange:' + this.queryParams[key].join(',')
        }
      }
      this.myFields.forEach(field => {
        if(field.prop !== field.queryProp && queryParamsHandled[field.prop]) {
          delete queryParamsHandled[field.prop];
        }
      })
      this.$commonSearch.inputSearch(this.url, queryParamsHandled).then(resp => {
        this.result = resp.rows
        this.total = resp.total
      })

    },
    showTab() {
      if (this.isDisabled) return
      this.handleCondition();
      this.dialogVisible = true
      this.result = []
      let tableRef = 'table-' + this.index
      if (this.$refs[tableRef]) {
        if (this.isMulti) {
          this.$refs[tableRef].clearMulti()
        } else {
          this.$refs[tableRef].clearSelect()
        }
      }
    },
    close() {
      this.dialogVisible = false;
    },
    handleMessage(key, value) {
      this.keyWord = value.map((item) => item[key]).join('|');
      this.$emit('set-value', this.bindKey, this.index, this.keyWord)
      this.focus();
    },
    setValue(e,close,notFocus) {
      this.$emit('set-value',this.bindKey, this.index, this.keyWord,close)
      let p = {}
      p[this.index] = this.keyWord
      this.queryParams = Object.assign({},this.queryParams,p)
      if(!notFocus){
        this.focus();
      }
    },
    handleCondition(){
      if(this.condition && this.condition.length > 0) {
        this.$emit('get-condition',this.bindKey,this.condition,val =>{
          // Object.assign(this.queryParams,val) 不能这种方式，是无法修改输入框的
          this.queryParams = Object.assign({},this.queryParams,val)
        })
      }
    },
    updateValue(val) {
      this.keyWord = val;
    },
    getKeyWord() {
      return this.keyWord;
    },
    focus(){
      this.$refs['ref-input-'+ this.index].focus();
    },
    updateDesc(val){
      this.descVal = val;
    }
  },
  created() {
    this.myFields = this.tableFields.map((item, index) => {
      return Object.assign({}, {val: ''}, item)
    });
    this.keyWord = this.defaultVal;

  },
  mounted() {
    // console.log(1)
  }
}
</script>

<style scoped>
.is-disabled >>> input {
  background: #e3e3e3 !important;
  color:black !important;
}

.is-disabled button {
  background: #e3e3e3 !important;
}
.el-date-editor >>> .el-range-input{

}
.open-button {
  padding-left: 15px;
  padding-right: 15px;
}
</style>
<style>
/*.el-picker-panel {*/
/*  width:100px !important;*/
/*}*/
</style>
